<template>
	<view 
		class="brand-button" 
		:class="[
			`btn-${type}`, 
			`btn-${size}`,
			{ 'btn-disabled': disabled },
			{ 'btn-loading': loading }
		]"
		@tap="handleClick"
	>
		<view v-if="loading" class="loading-icon">⟳</view>
		<text class="btn-text">{{ text }}</text>
	</view>
</template>

<script setup>
// 定义属性
const props = defineProps({
	// 按钮文字
	text: {
		type: String,
		default: '按钮'
	},
	// 按钮类型
	type: {
		type: String,
		default: 'primary',
		validator: (value) => {
			return ['primary', 'secondary', 'success', 'warning', 'error', 'info', 'outline'].includes(value)
		}
	},
	// 按钮尺寸
	size: {
		type: String,
		default: 'medium',
		validator: (value) => {
			return ['small', 'medium', 'large'].includes(value)
		}
	},
	// 是否禁用
	disabled: {
		type: Boolean,
		default: false
	},
	// 是否加载中
	loading: {
		type: Boolean,
		default: false
	}
})

// 定义事件
const emit = defineEmits(['click'])

// 处理点击事件
const handleClick = () => {
	if (!props.disabled && !props.loading) {
		emit('click')
	}
}
</script>

<style lang="scss" scoped>

.brand-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 25rpx;
	font-weight: bold;
	transition: $transition-fast;
	position: relative;
	overflow: hidden;
	border: 2rpx solid transparent;

	// 按下效果
	&:active:not(.btn-disabled):not(.btn-loading) {
		transform: scale(0.95);
	}

	// 按钮类型样式
	&.btn-primary {
		background: $brand-gradient-main;
		color: $text-inverse;
		box-shadow: $shadow-light;

		&:hover {
			box-shadow: $shadow-medium;
		}
	}

	&.btn-secondary {
		background: $brand-secondary;
		color: $text-inverse;
		box-shadow: $shadow-light;

		&:hover {
			background: $brand-secondary-dark;
		}
	}

	&.btn-success {
		background: $success-color;
		color: $text-inverse;

		&:hover {
			background: $success-dark;
		}
	}

	&.btn-warning {
		background: $warning-color;
		color: $text-inverse;

		&:hover {
			background: $warning-dark;
		}
	}

	&.btn-error {
		background: $error-color;
		color: $text-inverse;

		&:hover {
			background: $error-dark;
		}
	}

	&.btn-info {
		background: $info-color;
		color: $text-inverse;

		&:hover {
			background: $info-dark;
		}
	}

	&.btn-outline {
		background: rgba(255, 255, 255, 0.9);
		color: $brand-primary;
		border-color: $brand-primary;
		border-width: 3rpx;
		box-shadow: 0 4rpx 16rpx rgba($brand-primary, 0.2);

		&:hover {
			background: $brand-primary;
			color: $text-inverse;
			transform: translateY(-2rpx);
		}
		
		&:active:not(.btn-disabled):not(.btn-loading) {
			transform: scale(0.95) translateY(0);
		}
	}

	// 按钮尺寸
	&.btn-small {
		padding: 15rpx 25rpx;
		font-size: 24rpx;
		border-radius: 20rpx;
		min-height: 60rpx;
	}

	&.btn-medium {
		padding: 20rpx 35rpx;
		font-size: 28rpx;
		border-radius: 25rpx;
		min-height: 80rpx;
	}

	&.btn-large {
		padding: 25rpx 45rpx;
		font-size: 32rpx;
		border-radius: 30rpx;
		min-height: 100rpx;
		width: 100%;
		box-sizing: border-box;
	}

	// 禁用状态
	&.btn-disabled {
		opacity: $btn-disabled-opacity;
		cursor: not-allowed;
		transform: none !important;
	}

	// 加载状态
	&.btn-loading {
		cursor: wait;

		.loading-icon {
			margin-right: 10rpx;
			animation: spin 1s linear infinite;
		}
	}

	.btn-text {
		white-space: nowrap;
	}
}

// 旋转动画
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
</style>